class Myscroll{
	constructor(selector,options={}){
		this.queryEvent=[];
		//处理默认参数
		function defaultValues(options,defaults){
			for(let name in defaults){
				if(typeof options[name]=='undefined'){
					// options.name=defaults.name;
					options[name]=defaults[name];
				}
			}
		}
		defaultValues(options,{
			bounce: true,
			bounceTime: 600,
			scrollX:false,
			scrollY:true,
			startX:0,
			startY:0,
			freeScroll:false,
			directionLockThreshold:5
		})
		// options.bounce=(typeof options.bounce=='undefined')||true;
		//选出父级
		let aParent=Array.from(document.querySelectorAll(selector));

		aParent.forEach(item=>{
			let child=item.children[0];
			if(!child)return;
			child.addEventListener('touchstart',start,{passive:true});
			child.addEventListener('touchmove',move,{passive:true});
			child.addEventListener('touchend',end,{passive:true});
			//加事件
			let _this=this;
			let firstMove;
			let startx=0,starty=0;//起始点坐标
			let disx=0,disy=0;
			let translateX=options.startX,translateY=options.startY;
			let dir='';//方向锁定
			// let arr=[];
			child.style.transform=`translateX(${translateX}px) translateY(${translateY}px)`;
			function start(ev){
				startx=ev.targetTouches[0].clientX;	
				starty=ev.targetTouches[0].clientY;

				disx=startx-translateX;
				disy=starty-translateY;
				dir='';
				_this.queryEvent.forEach(json=>{
					if(json.type=='beforeScrollStart'){
						json.fn()
					}
				});
				firstMove=true;
			}
			function move(ev){
				if(firstMove){
					firstMove=false;
					_this.queryEvent.forEach(json=>{
						if(json.type=='scrollStart'){
							json.fn()
						}
					});
				}
				if(dir==''){ 
					if(Math.abs(ev.targetTouches[0].clientX-startx)>=options.directionLockThreshold){
						dir='x';
					} 
					if(Math.abs(ev.targetTouches[0].clientY-starty)>=options.directionLockThreshold){
						dir='y';
					}
				}else{
					if(options.freeScroll || dir=='x'){
						translateX=ev.targetTouches[0].clientX-disx;
					}
					if(options.freeScroll || dir=='y'){
						translateY=ev.targetTouches[0].clientY-disy;
					}
					_this.x=translateX;
					_this.y=translateY;

					_this.queryEvent.forEach(json=>{
						if(json.type=='scroll'){
							json.fn()
						}
					});
					child.style.transform=`translateX(${translateX}px) translateY(${translateY}px)`;
				}
			}
			function end(){
				if(translateX>0){
					translateX=0;
				}
				if(translateX<item.offsetWidth-child.offsetWidth){
					translateX=item.offsetWidth-child.offsetWidth;
				}
				if(translateY>0){
					translateY=0;
				}
				if(translateY<item.offsetHeight-child.offsetHeight){
					translateY=item.offsetHeight-child.offsetHeight;
				}
				child.style.transition=`${options.bounceTime}ms all ease`
				child.style.transform=`translateX(${translateX}px) translateY(${translateY}px)`;

				child.addEventListener('transitionend',tend,{passive:true});
				
				function tend(){
					child.style.transition='';
					child.removeEventListener('transitionend',tend,{passive:true});
					_this.queryEvent.forEach(json=>{
					if(json.type=='scrollEnd'){
						json.fn()
					}
				});
				}
			}
		});
	}
	on(name,fn){
		this.queryEvent.push({type:name,fn});
	}
	beforeScrollStart(fn){
		this.queryEvent.push({type:'beforeScrollStart',fn});
	}
}